<template>
  <!-- 页脚组件-start -->
  <div class="footer">
    <ul>
      <!-- logo、协议、联系方式 -->
      <li class="footer_options">
        <ol>
          <li class="footer_logo"></li>
          <li class="footer_agreement">
            <router-link to="/agreement" target="_blank"
              >&laquo;用户注册协议及隐私政策&raquo;</router-link
            >
          </li>
          <li class="footer_qq">
            本站内容只用于学习与交流,如有牵扯版权问题请联系QQ邮箱：<span
              class="specialColor"
              >1489693645@qq.com</span
            >
          </li>
        </ol>
      </li>
      <!-- 备案号 -->
      <li class="footer_record">
        Copyright ©2020
        <span class="mRight specialColor">bigtree.host</span>
        <a href="http://beian.miit.gov.cn/" target="_blank" class="filing_icon"
          >粤ICP备2020119735号-1</a
        >
      </li>
      <li class="footer_record">
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44010602008728"
          class="filing_icon"
        >
          粤公网安备 44010602008728号
        </a>
      </li>
    </ul>
  </div>
  <!-- 页脚组件-end -->
</template>
<script>
export default {
  name: "big-footer",
};
</script>
<style lang="less" scoped>
.footer {
  width: 100%;
  background: @cK;
  color: @cL;
  text-align: center;
  padding: 20px 0;
  .footer_logo {
    width: 56px;
    height: 56px;
    border: 1px solid @cF;
    border-radius: 5px;
    background: url("../../public/img/bigtree.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }
  .footer_agreement {
    margin: 10px 0;
  }
  .footer_qq {
    font-size: 12px;
  }
  .footer_record {
    margin-top: 10px;
    .mRight {
      margin-right: 20px;
    }
  }
  //着重色
  .specialColor {
    color: @cJ;
  }
  .filing_icon {
    display: inline-block;
    padding-left: 22px;
    background: url("../../public/img/filing_icon.png") no-repeat;
    background-size: 20px 20px;
    background-position: 0 0;
  }
}
</style>

